<template>
  <div>
    <h1>异步组件(defineAsyncComponent) 、Suspense</h1>
    <p>defineAsyncComponent(() => import("./a.vue"));</p>
    <!--  Suspense内部组件 用于加载异步组件 配合slot  -->
    <Suspense>
      <!-- 用于显示异步组件 -->
      <template #default>
        <A></A>
      </template>

      <!-- 用于显示异步组件未加载时 的内容-->
      <template #fallback> loading····· </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue";

// defineAsyncComponent打包时 单独生成一个.js文件
const A = defineAsyncComponent(() => import("./a.vue"));
</script>

<style lang="less" scoped>
div {
  padding: 20px;
  background: red;
}
</style>
